<template>
    <div id="div">
        <el-col :span="8" v-for="(o, index) in user">
            <el-card>
                <img src="../../assets/img/banner.jpg" class="image">
                <div style="padding: 14px;">
                    <span>{{o.name}}</span>
                    <div class="bottom clearfix">
                        <time class="time">{{ o.email }}</time>
                        <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </div>
</template>

<script>
    export default {
        props: {},
        data() {
            return {
                user: [],
                currentDate: new Date(),
            }
        },
        methods: {
            changeTitle: function () {
            }
        },
        created() {
            this.$http.get("http://jsonplaceholder.typicode.com/users").then((data) => {
                this.user = data.body;
            });
        }
    }
</script>


<style scoped>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
